<template>
  <div class="blog-list">
    <el-empty v-if="!blogs.length" description="暂无文章" />
    
    <div v-else class="blog-items">
      <blog-card
        v-for="blog in blogs"
        :key="blog.id"
        :blog="blog"
        @click="handleBlogClick(blog)"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'
import { useRouter } from 'vue-router'
import type { Blog } from '@/types'
import BlogCard from './BlogCard.vue'

const props = defineProps<{
  blogs: Blog[]
}>()

const router = useRouter()

const handleBlogClick = (blog: Blog) => {
  router.push(`/blog/${blog.id}`)
}
</script>

<style lang="scss" scoped>
.blog-list {
  .blog-items {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
}
</style> 